<template>
    <div class="app-container">
        <!-- 操作按钮行 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-download" size="mini" class="custom-download-btn"
                    @click="handleDownload">
                    下载
                </el-button>
            </el-col>
            <el-col :span="3">
                <el-input v-model="searchKeyword" placeholder="请输入搜索关键词" clearable class="custom-input" />
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-search" size="mini" class="custom-search-btn"
                    @click="handleSearch">
                    搜索
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" class="custom-add-btn" @click="handleAdd">
                    新增
                </el-button>
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="xianchaList" class="custom-table" border resizable>
            <!-- 表格列定义 -->
            <el-table-column v-for="(column, index) in tableColumns" :key="index" :label="column.label"
                :prop="column.prop" :formatter="column.formatter" width="150" />
            <!-- 操作列 -->
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" class="custom-edit-btn" @click="handleEdit(scope.row)">
                        编辑
                    </el-button>
                    <el-button size="mini" type="text" class="custom-delete-btn" @click="handleDelete(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="currentPage" :page-sizes="[5, 10, 20, 30, 40]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total" class="custom-pagination" />

        <!-- 对话框组件 -->
        <el-dialog :title="isEdit ? '编辑线查记录' : '新增线查记录'" :visible.sync="dialogVisible" width="50%"
            class="custom-dialog">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="编号" prop="xcid" v-if="isEdit">
                    <el-input v-model.number="form.xcid" disabled />
                </el-form-item>
                <el-form-item label="设备ID编号" prop="eq_id">
                    <el-input v-model.number="form.eq_id" />
                </el-form-item>
                <el-form-item label="站区ID编号" prop="zq_id">
                    <el-input v-model.number="form.zq_id" />
                </el-form-item>
                <el-form-item label="线差id外键" prop="base_xcid">
                    <el-input v-model.number="form.base_xcid" />
                </el-form-item>
                <el-form-item label="冗余字段" prop="ganhaos">
                    <el-input v-model="form.ganhaos" />
                </el-form-item>
                <el-form-item label="检查日期" prop="mkdate">
                    <el-date-picker v-model="form.mkdate" type="date" placeholder="选择检查日期" format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd" />
                </el-form-item>
                <el-form-item label="避雷器主体绝缘状态" prop="beforewx">
                    <el-input v-model="form.beforewx" />
                </el-form-item>
                <el-form-item label="避雷器引线状态" prop="afterwx">
                    <el-input v-model="form.afterwx" />
                </el-form-item>
                <el-form-item label="设备线夹连接状态" prop="remainqs">
                    <el-input v-model="form.remainqs" />
                </el-form-item>
                <el-form-item label="引线上网点状态" prop="checker">
                    <el-input v-model="form.checker" />
                </el-form-item>
                <el-form-item label="负责人" prop="leader">
                    <el-input v-model="form.leader" />
                </el-form-item>
                <el-form-item label="操作人" prop="oprator">
                    <el-input v-model="form.oprator" />
                </el-form-item>
                <el-form-item label="是否最新" prop="islast">
                    <el-select v-model="form.islast">
                        <el-option label="是" value="1" />
                        <el-option label="否" value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" />
                </el-form-item>
            </el-form>
            <el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false" class="custom-cancel-btn">取消</el-button>
                    <el-button type="primary" @click="submitForm" class="custom-confirm-btn">确定</el-button>
                </span>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {
    selectAll,
    deleteXiancha,
    downloadXiancha,
    addXiancha,
    updateXiancha
} from "@/api/MaintenanceRecord/xiancha";
import dayjs from "dayjs";

export default {
    name: "XianchaList",
    data() {
        return {
            loading: true,
            xianchaList: [],
            allList: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            searchKeyword: "",
            tableColumns: [
                { label: "编号", prop: "xcid" },
                { label: "设备名称", prop: "equipname" },
                { label: "站区名称", prop: "zqname" },
                { label: "工区名称", prop: "gongquName" },
                { label: "冗余字段", prop: "ganhaos" },
                { label: "检查日期", prop: "mkdate", formatter: this.formatDate },
                { label: "避雷器主体绝缘状态", prop: "beforewx" },
                { label: "避雷器引线状态", prop: "afterwx" },
                { label: "设备线夹连接状态", prop: "remainqs" },
                { label: "引线上网点状态", prop: "checker" },
                { label: "负责人", prop: "leader" },
                { label: "操作人", prop: "oprator" },
                { label: "是否最新", prop: "islast" },
                { label: "备注", prop: "remark" }
            ],
            dialogVisible: false,
            isEdit: false,
            form: {
                xcid: null,
                eq_id: null,
                zq_id: null,
                base_xcid: null,
                ganhaos: "",
                mkdate: "",
                beforewx: "",
                afterwx: "",
                remainqs: "",
                checker: "",
                leader: "",
                oprator: "",
                islast: null,
                remark: ""
            },
            rules: {
                eq_id: [
                    { required: true, message: "请输入设备ID编号", trigger: "blur" }
                ],
                zq_id: [
                    { required: true, message: "请输入站区ID编号", trigger: "blur" }
                ],
                base_xcid: [
                    { required: true, message: "请输入线差id外键", trigger: "blur" }
                ],
                ganhaos: [
                    { required: true, message: "请输入冗余字段", trigger: "blur" }
                ],
                mkdate: [
                    { required: true, message: "请选择检查日期", trigger: "blur" }
                ],
                beforewx: [
                    { required: true, message: "请输入避雷器主体绝缘状态", trigger: "blur" }
                ],
                afterwx: [
                    { required: true, message: "请输入避雷器引线状态", trigger: "blur" }
                ],
                remainqs: [
                    { required: true, message: "请输入设备线夹连接状态", trigger: "blur" }
                ],
                checker: [
                    { required: true, message: "请输入引线上网点状态", trigger: "blur" }
                ],
                leader: [
                    { required: true, message: "请输入负责人", trigger: "blur" }
                ],
                oprator: [
                    { required: true, message: "请输入操作人", trigger: "blur" }
                ],
                islast: [
                    { required: true, message: "请选择是否最新", trigger: "blur" }
                ],
                remark: [
                    { required: true, message: "请输入备注", trigger: "blur" }
                ]
            }
        };
    },
    computed: {
        filteredList() {
            if (!this.searchKeyword) return this.allList;
            const keyword = this.searchKeyword.toLowerCase();
            return this.allList.filter((item) =>
                Object.values(item).some((value) =>
                    String(value).toLowerCase().includes(keyword)
                )
            );
        }
    },
    created() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            selectAll()
                .then((response) => {
                    this.allList = response.data;
                    this.total = this.allList.length;
                    this.currentPage = 1;
                    this.updateXianchaList();
                    this.loading = false;
                })
                .catch((error) => {
                    console.error("接口请求出错:", error);
                    this.loading = false;
                });
        },
        updateXianchaList() {
            const start = (this.currentPage - 1) * this.pageSize;
            const end = start + this.pageSize;
            this.xianchaList = this.filteredList.slice(start, end);
        },
        handleDelete(row) {
            this.$confirm("确认删除该记录吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    deleteXiancha(row.xcid)
                        .then(() => {
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            this.fetchData();
                        })
                        .catch((error) => {
                            console.error("删除失败:", error);
                            this.$message({
                                type: "error",
                                message: "删除失败"
                            });
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.fetchData();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.updateXianchaList();
        },
        handleDownload() {
            downloadXiancha()
                .then((response) => {
                    const url = window.URL.createObjectURL(new Blob([response.data]));
                    const link = document.createElement("a");
                    link.href = url;
                    link.setAttribute("download", "线查记录数据.xlsx");
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                })
                .catch((error) => {
                    console.error("下载失败:", error);
                });
        },
        handleSearch() {
            this.currentPage = 1;
            this.fetchData();
        },
        formatDate(row, column, cellValue, index) {
            return dayjs(cellValue).format("YYYY-MM-DD");
        },
        handleEdit(row) {
            this.isEdit = true;
            this.form = { ...row };
            this.dialogVisible = true;
        },
        handleAdd() {
            this.isEdit = false;
            this.form = {
                xcid: null,
                eq_id: null,
                zq_id: null,
                base_xcid: null,
                ganhaos: "",
                mkdate: "",
                beforewx: "",
                afterwx: "",
                remainqs: "",
                checker: "",
                leader: "",
                oprator: "",
                islast: null,
                remark: ""
            };
            this.dialogVisible = true;
        },
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.isEdit) {
                        updateXiancha(this.form.xcid, this.form)
                            .then(() => {
                                this.$message.success("编辑成功");
                                this.fetchData();
                                this.dialogVisible = false;
                            })
                            .catch((error) => {
                                console.error("编辑失败:", error);
                                this.$message.error("编辑失败");
                            });
                    } else {
                        addXiancha(this.form)
                            .then(() => {
                                this.$message.success("新增成功");
                                this.fetchData();
                                this.dialogVisible = false;
                            })
                            .catch((error) => {
                                console.error("新增失败:", error);
                                this.$message.error("新增失败");
                            });
                    }
                } else {
                    this.$message.warning("请填写所有必填字段");
                    return false;
                }
            });
        }
    }
};
</script>


  
<style scoped>
.custom-table {
    border: 1px solid #e4e7ed;
    border-radius: 4px;
}
.custom-table.el-table__header th {
    background-color: #f5f7fa;
    color: #303133;
    font-weight: bold;
}
.custom-table.el-table__body tr {
    height: 40px;
}
.custom-table.el-table__body td {
    color: #606266;
}
.custom-download-btn {
    background-color: #67c23a;
    color: #fff;
    border: none;
    border-radius: 4px;
}
.custom-download-btn:hover {
    background-color: #85ce61;
}
.custom-search-btn, .custom-add-btn {
    background-color: #409EFF;
    color: #fff;
    border: none;
    border-radius: 4px;
}
.custom-search-btn:hover, .custom-add-btn:hover {
    background-color: #66b1ff;
}

.custom-input {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 5px;
    background-color: #f5f7fa;
}
.custom-input:hover, .custom-input:focus {
    border-color: #409EFF;
}

.custom-edit-btn, .custom-delete-btn {
    color: #409EFF;
}
.custom-edit-btn:hover, .custom-delete-btn:hover {
    color: #66b1ff;
}

.custom-pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.custom-pagination.el-pagination button, .custom-pagination.el-pagination span {
    font-size: 14px;
    color: #606266;
}
.custom-pagination.el-pagination.el-pager li {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin: 0 5px;
}
.custom-pagination.el-pagination.el-pager li:hover {
    color: #409EFF;
    border-color: #409EFF;
}

.custom-dialog {
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.custom-datepicker {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 5px;
    background-color: #f5f7fa;
}
.custom-datepicker:hover, .custom-datepicker:focus {
    border-color: #409EFF;
}

.custom-cancel-btn {
    background-color: #e4e7ed;
    color: #606266;
    border: none;
    border-radius: 4px;
}
.custom-cancel-btn:hover {
    background-color: #d1dbe5;
}
.custom-confirm-btn {
    background-color: #409EFF;
    color: #fff;
    border: none;
    border-radius: 4px;
}
.custom-confirm-btn:hover {
    background-color: #66b1ff;
}
</style>